<template>
    <div class="load">
        <div class="top">
            <div class="left">
                <div class="item">
                    <div class="label">
                        <span></span>
                        <span>车牌号</span>
                    </div>
                    <el-input v-model="form.carNo" placeholder="请输入" size="small" style="width: 100px" clearable>
                    </el-input>
                </div>
                <div class="item">
                    <div class="label">
                        <span></span>
                        <span>车主</span>
                    </div>
                    <el-input v-model="form.owner" placeholder="请输入" size="small" clearable style="width: 100px">
                    </el-input>
                </div>
                <div class="item">
                    <div class="label">
                        <span></span>
                        <span>司机</span>
                    </div>
                    <el-input v-model="form.driver" placeholder="请输入" clearable size="small" style="width: 100px">
                    </el-input>
                </div>
                <div class="item">
                    <div class="label">
                        <span></span>
                        <span>身份证号</span>
                    </div>
                    <el-input v-model="form.certNumber" placeholder="请输入" clearable size="small" style="width: 120px">
                    </el-input>
                </div>
                <div class="item">
                    <el-button type="primary" class="search" @click="getFleetList" icon="el-icon-search"
                        >查询</el-button
                    >
                </div>
            </div>
            <div class="right">
                <el-button type="primary" class="search" :loading="btnLoading" @click="addBox">新增车辆</el-button>
                <el-button type="primary" class="search" :loading="btnLoading1" @click="downLoad">下载模板</el-button>
                <!-- <el-button type="primary" class="search" :loading="btnLoading3" @click="upload">导入</el-button> -->
                <el-upload style="display: inline-block;margin-left: 5px;" action="" :httpRequest="commitPic" v-loading="upAlready" accept=".xls,.xlsx" :show-file-list="false">
                    <el-button class="search" type="primary"  icon="icon-daoru iconfont">导入</el-button>
                </el-upload>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                :header-cell-style="{ background: '#EEF1F5' }"
                style="width: 100%"
                @row-click="rowClick"
            >
                <el-table-column prop="carNo" label="车牌号" width="180"> </el-table-column>
                <el-table-column prop="tare" label="空车皮重" width="180"> </el-table-column>
                <el-table-column prop="loadTon" label="载重吨" width="180"> </el-table-column>
                <el-table-column prop="owner" label="车主" width="180"> </el-table-column>
                <el-table-column prop="ownerTel" label="车主联系方式" width="180"> </el-table-column>
                <el-table-column prop="sealno" label="司机" width="180">
                    <template slot-scope="scope">
                        <el-button @click="addGoods(scope.row, scope.$index,'0')" type="text" style="color: #0f47b8">司机明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" width="180">
                    <template slot-scope="scope">
						<span>{{scope.row.state=='0'?'启用':'禁用'}}</span>
					</template>
                </el-table-column>
                <el-table-column prop="createName" label="创建人" width="180"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row, scope.$index)" type="text" style="color: #0F47B8"
                            >编辑</el-button
                        >
                        <!-- <el-button type="text" style="color: #737373" @click="del(scope.$index)">删除</el-button> -->
                        <el-button type="text" style="color: #0F47B8" @click="addGoods(scope.row, scope.$index,'1')"
                            >新增司机</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryAll.startpage"
                    :page-sizes="[10, 15, 30, 50]"
                    :page-size="queryAll.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryAll.totalNum"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="65%">
            <addBox
                ref="addBox"
                v-if="visible == 'box' && dialogVisible"
                @closeDialog="dialogVisible = false"
                @addItem="addItem"
				:title="title"
            ></addBox>
            <addGoods
                ref="addGoods"
                :boxInfo="boxInfo"
                :row="multipleSelection"
                @closeDialog="dialogVisible = false"
                @successAdd="successAdd"
				@successDel="successDel"
				:driverFlag="driverFlag"
				:getFleetList="getFleetList"
                v-if="visible == 'goods' && dialogVisible"
            ></addGoods>
        </el-dialog>
        
        <el-dialog title=""
            :visible.sync="dialogVisible1"
            :before-close="handleClose1123"
            width="65%">
            <uploadExl :scdId="condition.scdId" :voyType="condition.voyType" :isCar="isCar" v-if="dialogVisible1" ></uploadExl>
        </el-dialog>
    </div>
</template>

<script>
    import addBox from "./addBox.vue";
import uploadExl from '../../../components/uploadExl.vue'
    import addGoods from "./addGoods.vue";
import { boxDataCount,downloadExcelTemplate,fillDisplay } from '@/util/CommUtil'
    export default {
        name: "loadList",
        components: { addBox, addGoods,uploadExl },
        data() {
            return {
                isCar: '9527',
                tableData: [],
                termList: [],
                condition: {
                    scdId: "",
                    voyType: "",
                    billno: "",
                    cntrno: ""
                },
                dialogVisible: false,
                visible: "box",
                btnLoading: false,
                btnLoading1: false,
                btnLoading2: false,
                btnLoading3: false,
                boxInfo: {},
                isChecked: false,
                currentIndex: -1,
                multipleSelection: {},
                queryAll: {
                    startpage: 1,
                    pagesize: 10,
                    totalNum: 0
                },
                form: {
                    customerCode: "", //客户编码
                    carNo: "", //车牌号
                    owner: "", //车主
                    driver: "", //司机
                    certNumber: "" //身份证号
                },
				title:'',
                dialogVisible1:false,
                upAlready:false,
				driverFlag:''
            };
        },

        methods: {
            commitPic(file){
                // console.log(file)
                const formData = new FormData();
                formData.append("file", file.file);
                formData.append("scdId", this.scdId);
                formData.append("voyType", this.voyType);
                this.upAlready = true
                console.log('9527');
                
                this.$api.importLoadAndUploadCar(formData).then(res=>{
                if(res.message){
                    // console.log('成功成功')
                    this.$message.success("上传成功")
                    // console.log([res.data])
                    res.data.forEach(element => {
                    this.file.push(element)
                    });
                }else{
                    // console.log('失败失败')
                    this.$message.error("上传失败")
                }
                }).catch(err=>{
                // console.log('报错报错')
                //this.$message.error(err.message)
                }).finally(()=>{
                setTimeout(() => {
                    this.upAlready = false
                    return
                }, 200);
                })
            },
            handleClose1123(done){
                console.log('fakshdfkjsadkfjahsdkjf');
                
                this.dialogVisible1 = false;
                this.getFleetList()
                done()
            },
            setBox(list){
                this.tableData = list
                fillDisplay(this.tableData)
                // 重新计算箱统计数量
                this.boxCountInfo = boxDataCount(this.tableData)
            },
            downLoad(){
                downloadExcelTemplate('车队信息模板.xls')
            },
            upload(){
            this.dialogVisible1=true
            },
            getFleetList(flag) {
                let params = {
                    startpage: this.queryAll.startpage,
                    pagesize: this.queryAll.pagesize,
                    customerCode: JSON.parse(localStorage.getItem('userInfo')).customerCode,
                    carNo: this.form.carNo,
                    owner: this.form.owner,
                    driver: this.form.driver,
                    certNumber: this.form.certNumber,
                };
                this.$api.getFleetList(params).then((res) => {
                    this.tableData = res.data.pages;
					this.queryAll.totalNum = res.data.totalNum
					if (flag) {
						this.tableData.map(item =>{
							if (item.id ==this.multipleSelection.id) {
								this.$set(this,"multipleSelection",item)
								console.log(this.multipleSelection);
								
							}
						})
					}
                });
            },
            addGoods(item, index,flag) {
				console.log(item);
                this.currentIndex = index;
                this.boxInfo = item;
				this.multipleSelection = item
                this.dialogVisible = true;
                this.visible = "goods";
                this.$nextTick(() => {
                    this.$refs.addGoods.goods = item.goods || [];
                });
				this.driverFlag = flag
            },
            addBox() {
				this.title = '新增车辆'
                this.dialogVisible = true;
                this.visible = "box";
                this.currentIndex = -1;
            },
            addItem(form) {
                let params = {
					customerCode:JSON.parse(localStorage.getItem('userInfo')).customerCode,
					customerName:JSON.parse(localStorage.getItem('userInfo')).customerName,
					createName:JSON.parse(localStorage.getItem('userInfo')).name,
					createBy:JSON.parse(localStorage.getItem('userInfo')).userName,
					carNo:form.carNo,
					tare:form.tare,
					loadTon:form.loadTon,
					owner:form.owner,
					ownerTel:form.ownerTel,
					state:form.state,
				}
				if (this.title =='新增车辆') {
					this.$api.insertCarNo(params).then(res=>{
						this.$message.success('保存成功')
						this.getFleetList()
						this.$refs.addBox.form = {}
					})
				}else {
					params.id = this.multipleSelection.id
					this.$api.updateCarNo(params).then(res=>{
						this.$message.success('保存成功')
						this.dialogVisible = false
						this.visible = ''
						this.getFleetList()
						this.$refs.addBox.form = {}
					})
				}
            },
            edit(item, index) {
				this.title = '编辑车辆'
                this.currentIndex = index;
                this.dialogVisible = true;
                this.visible = "box";
                this.$nextTick(() => {
                    this.$refs.addBox.form = { ...item };
                });
            },
            del(index) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示")
                    .then(() => {
                        this.tableData.splice(index, 1);
                    })
                    .catch(() => {});
            },
            rowClick(v) {
                this.multipleSelection = v;
            },
            handleSizeChange(val) {
                this.queryAll.startpage = 1;
                this.queryAll.pagesize = val;
                this.getFleetList();
            },
            handleCurrentChange(val) {
                this.queryAll.startpage = val;
                this.getFleetList();
            },
			successAdd(){
				this.$message.success('新增司机成功')
				this.getFleetList()
			},
			successDel(){
				this.$message.success('删除司机成功')
				this.getFleetList(1)
			}
        },

        computed: {},

        mounted() {
            this.condition.voyType = this.$route.name == "unloadList" ? "I" : "E";
            this.condition.scdId = this.$route.query.id;
            this.getFleetList();
        }
    };
</script>
<style lang="less" scoped>
    .load {
        background: #fff;
        padding: 20px;
    }
    .top {
        display: flex;
        align-items: flex-start;

        border-bottom: 1px solid #d7d7d7;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 16px;
        display: flex;
        .item {
            display: flex;
            align-items: center;
            margin-right: 16px;
            margin-bottom: 17px;
            .label {
                margin-right: 5px;
                width: 60px;
                span:first-child {
                    color: #ff3838;
                }
            }
        }
        .search {
            background: #0f47b8;
            height: 30px;
            padding: 5px 10px;
        }
        .del {
            height: 30px;
            padding: 5px 10px;
        }
        .left {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
        }
    }
    /deep/.el-dialog__footer {
        text-align: center;
        .el-button {
            color: #fff;
            background: #0f47b8;
            height: 30px;
            width: 100px;
            padding: 5px 10px;
        }
    }
    /deep/.el-dialog__header {
        padding: 0;
    }
    /deep/.el-dialog__body {
        padding: 20px;
    }
    .pagination {
        // height: 50px;
        margin: 10px;
        text-align: right;
    }
</style>
